import React, { useEffect } from 'react';
import { getDashboard } from '@/services/api';

// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

const ClasesEchars = () => {
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('ClasesEchars'), 'light');
    getDashboard().then((resp: any) => {
      const data: any = [];
      // const x_obj: any = [];
      const x_data: any = [];
      let classNum: number = 0;
      if (resp.status === 'success') {
        resp.data.clase_students_num.forEach(
          (
            e: any,
            // index: number, arr: any
          ) => {
            // if (arr[index - 1]?.grade_name === e.grade_name) {
            //   x_obj[e.grade_name].push(e.grade_name);
            // } else {
            //   x_obj[e.grade_name] = [e.grade_name];
            // }
            x_data.push(e.grade_name);
            classNum += e.cnt;
            data.push({
              label: e,
              value: e.cnt,
            });
          },
        );
      }

      // Object.keys(x_obj).forEach((item: any) => {
      //   x_obj[item].forEach((curr: any, index: number, arr: any) => {
      //     if (Math.ceil(arr.length / 2) === index) {
      //       x_data.push({
      //         value: curr,
      //         textStyle: {
      //           fontSize: '10',
      //         },
      //       });
      //     } else {
      //       x_data.push({
      //         value: '',
      //         textStyle: {
      //           fontSize: '10',
      //         },
      //       });
      //     }
      //   });
      // });

      const yMax = 500;
      const dataShadow = [];

      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
      }

      const option = {
        title: {
          text: `进班总人数：${classNum}`,
          textStyle: {
            fontSize: '14',
          },
        },
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter(params: any) {
            const { grade_name, clase_name } = params[0].data.label;
            return `
              ${grade_name}<br>
              ${clase_name}<br>
              ${params[0].marker} ${params[0].seriesName}：${params[0].value}<br>
              `;
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: x_data,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '人数',
            type: 'bar',
            barWidth: '60%',
            data,
          },
        ],
      };
      myChart.setOption(option);
    });
  }, []);

  return <div id="ClasesEchars" style={{ width: '100%', height: 400 }} />;
};

export default ClasesEchars;
